<template>
    <view v-if="info">
        <!-- 需求基本信息，各端各页面展示一样 -->
        <view class="nova-column info">
            <view class="nova-row" style="align-item: flex-end;">
                <text class="title">{{ getTypeName() }}</text>
                <block v-if="role == 2">
                    <text class="up-tag">{{ getUpTag() }}</text>
                </block>
                <!-- <text class="loc">{{ getVillageName() }}</text> -->
                <view style="flex: 1;"></view>
                <view v-if="info.price">
                    <text class="price">{{ info.price }}</text>
                    <text class="unit">元/月</text>
                </view>
            </view>
            <view class="nova-row-center" style="padding-top: 20rpx;">{{ getVillageName() }}</view>
            <view class="nova-row-center" style="padding-top: 28rpx; flex-wrap: wrap;">
                <view class="nova-row-center tag" v-for="v in info.tip" :key="v">
                    <view class="smalltag">{{ v }}</view>
                </view>
            </view>
        </view>
        <!-- 业主需求描述，各端/各状态一样 -->
        <c-desc title="需求描述" :arr="info.skillDetails"></c-desc>
        <!-- TODO -->

        <!-- 业主信息 -->
        <view class="yz-block" v-if="showOwner()">
            <c-job-owner :owner="owner"></c-job-owner>
            <block></block>
        </view>

        <!-- 阿姨信息 -->
        <c-desc title="阿姨信息" :arr="nurseResume" v-if="job_status >= 2 && nurseResume && nurseResume.length>0"></c-desc>

        <!-- 公司信息 -->
        <view class="company_style" v-if="showCompany()">
            <c-company :company="company"></c-company>
            <block></block>
        </view>

        <!-- 公司端： 申请的阿姨列表 -->
        <view class="auntyList" v-if="showAuntyList()">
            <c-auntys :corps="applyAuntyList" :job_status="job_status" @recommend="gsApiRecommend"></c-auntys>
            <block></block>
        </view>

        <!-- 业主端，谁看过我 -->
        <view class="companys" v-if="showCompanyList()">
            <c-companys :corps="companyList" :page="page" :job_status="job_status"></c-companys>
            <block></block>
        </view>

        <!-- 底部按钮区域 -->
        <!-- ['','已接单','已推荐','试用中','已雇佣','已评价','已追评'] -->
        <view class="buttons nova-row-center" style="margin-top: 60rpx;">
            <!-- #ifdef H5 -->
            <!--            <text class="btn">追评</text>
            <text class="btn btn-invert" style="line-height: 30rpx;">去网上找更多阿姨</text> -->
            <!-- #endif -->
            <!-- 阿姨端 -->
            <block v-if="role == 1">
                <view class="btn btn-invert" @click="goCall()" type="primary">
                    <image src="../../static/img/call_p.png" />
                    拨打
                </view>
                <button id="share" open-type="share" v-show="false"></button>
                <label for="share" class="btn"><view>分享给姐妹</view></label>
                <block v-if="job_status == 1">
                    <view class="btn" @click="goApply()" v-if="job_process == 0">申请</view>
                    <view class="btn" v-else-if="job_process == 1" @click="cancelApply()">取消申请</view>
                    <view class="btn" v-else>{{ getStatus() }}</view>
                </block>
                <view class="btn" v-else>{{ getStatus() }}</view>
            </block>
            <block v-if="role == 2">
                <block v-if="page == 'yz-publish'">
                    <view class="btn" @click="yzApiDelete()">作废</view>
                    <view class="btn" @click="goEdit()">编辑</view>
                </block>
            </block>

            <!-- 家政端 -->
            <block v-if="role == 3">
                <block v-if="page == 'gs-home'">
                    <button id="share" open-type="share" v-show="false"></button>
                    <label for="share" class="btn"><view>分享</view></label>
                    <view v-if="job_status == 0" class="btn" @click="gsApiAccept()">接单</view>
                    <block v-else-if="job_status == 1"><text class="btn" @click="goRecommend()">推荐阿姨</text></block>
                    <view v-if="job_status >= 0" class="btn" @click="goCall()">
                        <image src="../../static/img/call.png" />
                        拨打
                    </view>
                </block>
                <block v-else-if="job_status == 1">
                    <block v-if="page == 'gs-apply'">
                        <button id="share" open-type="share" v-show="false"></button>
                        <label for="share" class="btn"><view>分享</view></label>
                        <view class="btn" @click="gsApiPush()" style="font-size: 26rpx;">去网上找更多阿姨</view>
                        <text class="btn" @click="goRecommend()">推荐阿姨</text>
                        <view class="btn" @click="goCall()">
                            <image src="../../static/img/call.png" />
                            拨打
                        </view>
                    </block>
                    <block v-else-if="page == 'gs-recommend'">
                        <text v-if="job_status == 1" class="btn" @click="gsApiRecommend()">推荐阿姨</text>
                        <block></block>
                    </block>
                    <block v-else>
                        <text v-if="job_status == 1" class="btn btn-invert">已接单</text>
                    </block>
                </block>
                <block v-else-if="job_status == 2">
                    <text class="btn btn-invert">已推荐</text>

                    <text v-if="detail.type != 2" class="btn" @click="apiSetStatus(3)">试用</text>
                    <text v-else class="btn" @click="apiSetStatus(4)">雇佣</text>
                </block>

                <block v-else>
                    <text v-if="job_status == 3" class="btn btn-invert">试用中</text>
                    <text v-if="job_status == 3" class="btn" @click="apiSetStatus(4)">雇佣</text>
                    <text v-if="job_status == 4" class="btn btn-invert">已雇佣</text>
                    <text v-if="job_status == 5" class="btn btn-invert">已评价</text>
                    <text v-if="job_status == 6" class="btn btn-invert">已追评</text>
                </block>
            </block>
        </view>
        <c-popup-tip ref="alert" @confirm="recommend_back"></c-popup-tip>
    </view>
</template>

<script>
import conf from '../../common/conf.js';
import { auntdetails } from '../../api/api';
import uniPopup from '../../components/uni-popup/uni-popup.vue';
import cCompany from './c-company.vue';
import cJobOwner from './c-job-owner.vue';
import cDesc from './c-desc.vue';
import cCompanys from './c-companys.vue';
import cAuntys from './c-auntys.vue';
import cPopupTip from './c-popup-tip.vue';
export default {
    components: {
        uniPopup,
        cCompany,
        cJobOwner,
        cDesc,
        cCompanys,
        cAuntys,
        cPopupTip
    },
    data() {
        return {
            role: this.$global.role, //判断角色，1为阿姨，2为业主，3为家政
            page: '',
            publish_id: '',
            resume_id: '',
            job_status: undefined, // ['','已接单','已推荐','试用中','已雇佣','已评价','已追评']
            job_process: undefined,
            info: undefined, // 返回的大对象
            detail: undefined, // 基本信息
            company: undefined, // 公司
            companyList: [], //谁看过我
            owner: undefined, //业主信息
            applyAuntyList: [], // 申请的阿姨
            nurseResume: undefined
        };
    },
    onLoad(options) {
        console.log('onLoad', options);
        this.role = this.$global.role;
        this.page = options.page || '';
        this.publish_id = options.publish_id;
        if (options.resume_id) {
            this.resume_id = options.resume_id;
        }
        if (options.job_status) {
            this.job_status = parseInt(options.job_status);
        }

        if (this.$global.devEnv) {
            // #ifdef H5
            this.showAll();

            // #endif
        }
        if (this.publish_id) {
            if (this.role == 1) {
                // 阿姨端
                this.ayLoadData();
            } else if (this.role == 2) {
                // 业主端
                this.yzLoadData();
            } else if (this.role == 3) {
                // 家政端
                this.gsLoadData();
            }
        } else {
            console.error('请检查publish_id参数');
        }
    },
    methods: {
        showAll() {
            // #ifdef H5
            this.detail = {};
            this.company = {};
            this.companyList = [1, 2];
            this.auntyList = [1, 2];
            this.info = {};
            return true;
            // #endif
        },
        getTypeName() {
            if (this.detail) {
                return this.$getJobType(this.detail.type);
            }
            return '';
        },
        getVillageName() {
            if (this.detail) {
                return this.detail.place + this.detail.village_id;
            }
            return '';
        },
        // for ay
        getStatus() {
            let type = this.job_status;
            return this.$getJobStatus(type);
        },
        // 业主端状态，publishDetails.status：1：已接单 2：已雇佣   3:试用中 4:退回 5:已推荐
        getUpTag() {
            let type = this.job_status;
            console.log(type);
            return this.$getJobStatus(type);
        },
        showCompany() {
            return !!this.company;
        },
        showAuntyList() {
            // #ifdef H5
            return true;
            // #endif
            console.log('show aunty list', this.applyAuntyList);
            return this.role == 3 && this.page == 'gs-apply' && (this.applyAuntyList && this.applyAuntyList.length > 0);
        },
        showCompanyList() {
            // #ifdef H5
            return true;
            // #endif
            return this.role == 2 && this.companyList && this.companyList.length > 0;
        },
        showOwner() {
            // #ifdef H5
            return true;
            // #endif
            return this.role == 3 && this.owner && (this.page == 'gs-home' || this.page == 'gs-apply');
        },
        goCall() {
            let tel = 0;
            if (this.detail && this.detail.userPhone) {
                tel = this.detail.userPhone;
            }
            if (tel) {
                wx.makePhoneCall({
                    phoneNumber: tel
                });
            }
        },
        goApply() {
            // ay apply
            uni.navigateTo({
                url: '/pages/ay/ay-apply?id=' + this.publish_id
            });
        },
        cancelApply() {
            let that = this;
            uni.showModal({
                content: '是否确定取消申请该职位？',
                complete(res) {
                    if (res.confirm) {
                        that.apiCancelApply();
                    }
                }
            });
        },
        async apiCancelApply() {
            let data = {
                publish_id: this.publish_id,
                nurse_json: '',
                remarks: ''
            };
            let res = await this.$request.post({
                url: '/aunt/apply',
                data: data
            });
            this.$toast('取消申请成功');
            let e = {
                publish_id: this.publish_id,
                remove: true,
                job_process: 0,
                page: this.page
            };
            console.log('emit jobStatusChange', e);
            uni.$emit('jobStatusChange', e);
        },
        // 接单按钮
        async gsApiAccept() {
            console.log('接单按钮');
            let res = await this.$request.post({
                url: '/house/ownerChoose',
                data: {
                    publish_id: this.detail.publish_id
                }
            });
            this.job_status = 1;
            let e = { publish_id: this.detail.publish_id, remove: true };
            console.log('emit jobStatusChange', e);
            uni.$emit('jobStatusChange', e);
            this.$toast('接单成功');
        },
        async gsApiPush() {
            let res = await this.$request.post({
                url: '/publish/toLookNurse',
                data: {
                    publish_id: this.detail.publish_id
                }
            });
            this.$toast('推送成功');
        },
        async gsApiRecommend(event) {
            let res = await this.$request.post({
                url: '/publish/recommendNurse',
                data: {
                    resume_id: event.resume_id || this.resume_id, // 前面一页面带入的
                    publish_id: this.detail.publish_id
                    //status: this.aunt_status
                }
            });
            this.job_status = 2;
            let e = {
                resume_id: this.resume_id,
                job_status: this.job_status
            };
            console.log('emit gsRecommendYZ', e);
            uni.$emit('auntyStatusChange', e);
            this.onRecommendSuccess();
        },
        onRecommendSuccess() {
            // 调用接口推荐此阿姨给前一页面的业主
            this.$refs.alert.open();
        },
        // 家政 接到/需求页面进来的 推荐 打开弹窗-返回首页
        recommend_back() {
            // 家政公司我的接单/需求单详情进来的，推荐（调用接口推荐此阿姨给前一页面的业主)
            uni.navigateTo({
                url: '/pages/gs/gs-employ-aunty'
            });
        },
        // 家政 首页进来的- 底部按钮-推荐，点推荐按钮
        goRecommend() {
            uni.navigateTo({
                url: '/pages/gs/gs-recommend-aunty?publish_id=' + this.detail.publish_id
            });
        },
        // 编辑按钮
        goEdit() {
            console.log('编辑按钮');
            uni.redirectTo({
                url: '../c/p-publish-job?publish_id=' + this.publish_id
            });
        },
        // 作废按钮
        async yzApiDelete() {
            console.log('作废按钮');
            let res = await this.$request.post({
                url: '/aunt/mine/delPublish',
                data: {
                    publish_id: this.publish_id
                }
            });
            let e = {
                publish_id: this.publish_id,
                remove: true
            };
            console.log('emit yzDelete', e);
            uni.$emit('jobStatusChange', e);
            this.$toast('需求单删除成功，请重新刷新');
            setTimeout(function() {
                uni.navigateBack({});
            }, 500);
        },
        async apiSetStatus(targetStatus) {
            let res = await this.$request.post({
                url: '/publish/backNurse',
                data: {
                    job_status: targetStatus,
                    publish_id: this.detail.publish_id,
                    resume_id: this.detail.resume_id,
                    company_id: this.detail.company_id
                    // TODO
                }
            });
            this.job_status = targetStatus;
            let e = {
                publish_id: this.publish_id,
                job_status: this.job_status,
                job_process: this.job_process
            };
            console.log('emit statusChange', e);
            uni.$emit('jobStatusChange', e);
        },
        // 阿姨端需求详情请求
        async ayLoadData() {
            let res = await this.$request.post({
                url: '/aunt/auntDetail',
                data: {
                    publish_id: this.publish_id
                }
            });
            this.detail = res.publishDetails;
            this.company = res.company;
            this.job_status = this.detail.job_status;
            this.job_process = this.detail.job_process;
            this.info = res;
            console.log(`阿姨端 job_status = ${this.job_status}, job_process = ${this.job_process}`);
        },
        // 查询公司信息接口
        async loadCompany() {
            let res = await this.$request.post({
                url: '/company/companyQuery',
                data: {
                    company_id: this.info.publishDetails.company_id
                }
            });
            this.company = res.company || {};
        },
        // 家政公司需求详情请求
        async gsLoadData() {
            let res = undefined;
            if (this.page == 'gs-apply') {
                res = await this.$request.post({
                    url: '/publish/companyPublishDetail',
                    data: {
                        publish_id: this.publish_id,
                        status: this.job_status
                    }
                });
            } else {
                res = await this.$request.post({
                    url: '/house/houseDetail',
                    data: {
                        publish_id: this.publish_id
                    }
                });
            }
            if (Array.isArray(res)) {
                res = res[0];
            }
            this.detail = res.publishDetails;
            this.company = res.company;
            this.owner = res.userPublish;
            this.applyAuntyList = res.nursePublish || [];
            this.nurseResume = res.skillInformation || [];
            //this.loadCompany();
            this.job_status = this.detail.job_status;
            this.job_process = this.detail.job_process;

            this.info = res; //返回总json数据
            console.log(`公司端 page=${this.page} job_status = ${this.job_status}, job_process = ${this.job_process}`);
        },
        async yzLoadData() {
            let res = await this.$request.post({
                url: '/aunt/mine/myDetail',
                data: {
                    publish_id: this.publish_id,
                    job_status: this.job_status
                }
            });

            if (Array.isArray(res)) {
                res = res[0];
            }
            this.detail = res.publishDetails;
            this.company = res.company;
            this.companyList = res.companyList || [];
            
            this.nurseResume = res.nurseResume || [];
            this.job_status = this.detail.job_status;
            this.job_process = this.detail.job_process;
            this.info = res; //返回总json数据
            //this.loadCompany();
            console.log(`业主端 page=${this.page} job_status = ${this.job_status}, job_process = ${this.job_process}`);
        }
    },
    onShareAppMessage() {
        return {
            path: '/pages/c/p-job-detail?publish_id=' + this.publish_id,
            title: this.detail.village_id + '需要' + this.getTypeName(this.detail)
        };
    }
};
</script>

<style lang="scss">
.info {
    padding: 34rpx;

    .title {
        font-size: 32rpx;
        color: #333333;
    }

    .loc-icon {
        width: 18rpx;
        height: 22rpx;
        margin-right: 6rpx;
    }

    .loc {
        margin-left: 20rpx;
        font-size: 24rpx;
        color: #666666;
    }
    .up-tag {
        font-size: 16rpx;
        border-radius: 6rpx;
        width: 64rpx;
        height: 24rpx;
        position: relative;
        top: -12rpx;
        background-color: $uni-color-primary;
        line-height: 24rpx;
        text-align: center;
        color: white;
        margin-left: 20rpx;
    }
    .tag {
        //background-color: #f2f2f2;
        border-radius: 6rpx;
        font-size: 22rpx;
        color: $uni-color-primary;
        height: 40rpx;
        line-height: 40rpx;
        //min-width: 90rpx;
        margin-right: 24rpx;
        margin-bottom: 20rpx;
        white-space: nowrap;
        padding: 0 10rpx;
        position: relative;
        .smalltag {
            font-size: 24rpx;
        }
        &:after {
            content: '';
            @include border-1px($uni-color-primary, 10rpx);
        }
    }

    .price {
        font-size: 40rpx;
        color: $uni-color-primary;
    }

    .unit {
        font-size: 22rpx;
        color: $uni-color-primary;
    }
}

.buttons {
    box-sizing: border-box;
    height: 100rpx;
    line-height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 20rpx;
    padding-right: 20rpx;
    .btn {
        flex: 1;
        background-color: $uni-color-primary;
        height: 80rpx;
        display: inline-flex;
        align-items: center;
        border-radius: 12rpx;
        color: white;
        margin-left: 20rpx;
        margin-right: 20rpx;
        justify-content: center;
        image {
            width: 28rpx;
            height: 28rpx;
            margin-right: 20rpx;
        }
    }
    .btn-invert {
        color: $uni-color-primary;
        border: 1rpx solid $uni-color-primary;
        background: none;
    }
}

.popup {
    .content {
        position: relative;
        width: 680rpx;
        margin: 34rpx;
        border-radius: 32rpx;
        background-color: white;
        padding: 120rpx 20rpx 30rpx 34rpx;

        .logo {
            width: 200rpx;
            height: 200rpx;
            border-radius: 100rpx;
            box-shadow: 0 0 1 1 $uni-color-primary;
            position: absolute;
            top: -100rpx;
            left: 240rpx;
        }

        .close {
            width: 68rpx;
            height: 68rpx;
            position: absolute;
            bottom: -100rpx;
            left: 294rpx;
        }

        .title {
            font-size: 36rpx;
            color: #333;
        }

        .desc {
            font-size: 28rpx;
            color: #999;
            line-height: 40rpx;
        }
    }
}
</style>
